import '@umijs/max';
import React, {useEffect, useRef, useState} from 'react';
import {
  ProFormInstance,
  StepsForm,
  ProFormText,
  ProFormTextArea, ProFormRadio
} from "@ant-design/pro-components";
import {message, Modal, UploadProps} from "antd";
import Dragger from "antd/es/upload/Dragger";
import {InboxOutlined} from "@ant-design/icons";


export type Props = {
  values: API.UserDataStructureUpdateRequest;
  onCancel: () => void;
  onSubmit: (values: API.UserDataStructureUpdateRequest, file: File | null) => Promise<void>;
  visible: boolean;
};
const UpdateModal: React.FC<Props> = (props) => {
  const {values, visible, onCancel, onSubmit} = props;
  const formRef = useRef<ProFormInstance>();
  const [uploadedFile, setUploadedFile] = useState<File | null>(null);
  const uploadProps: UploadProps = {

    onChange: (info) => {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        const file = info.fileList[0].originFileObj;
        setUploadedFile(file as File);
        message.success(`${info.file.name} 文件上传成功`);
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} 文件上传失败`);
      }
    }
  };
  useEffect(() => {
    if (formRef) {
      formRef.current?.setFieldsValue(values);
    }
  }, [values])
  return (
    <StepsForm
      stepsProps={{
        size: 'small',
      }}
      stepsFormRender={(dom, submitter) => {
        return (
          <Modal
            width={640}
            bodyStyle={{padding: '32px 40px 48px'}}
            destroyOnClose={true}
            title={'数据结构'}
            open={visible}
            footer={submitter}
            onCancel={() => onCancel?.()}
          >
            {dom}
          </Modal>
        );
      }}
      onFinish={async (values) => {
        onSubmit?.(values, uploadedFile);
      }}
    >
      <StepsForm.StepForm
        formRef={formRef}
        name={'basic'}
        title={'结构信息'}
        initialValues={{
          append: true,
          removeHead: true,
          ...values,
        }}
      >
        <ProFormText
          name="structureName"
          width="md"
          label="结构名称"
          tooltip="最长为 50 位"
          placeholder="请输入结构名称"
          rules={[{required: true}]}
        />

        <ProFormTextArea
          name="dataStructure"
          label="数据结构"
          disabled
          tooltip="不填写则将按照第一次上传文件为准"
          width="lg"
          placeholder="示例：A,B,C,D,E"
        />

        <ProFormRadio.Group
          name="append"
          label="是否追加内容？"
          options={[
            {
              label: '覆盖',
              value: false,
            },
            {
              label: '追加',
              value: true,
            },
          ]}
          rules={[{required: true}]}
        />

        <ProFormRadio.Group
          name="removeHead"
          label="是否去除首行内容？"
          options={[
            {
              label: '是',
              value: true,
            },
            {
              label: '否',
              value: false,
            },
          ]}
          rules={[{required: true}]}
        />

      </StepsForm.StepForm>
      <StepsForm.StepForm
        title={'文件上传'}
        name='file'
      >
        <Dragger {...uploadProps} maxCount={1} name='file' accept={'.csv,.json,.xml,.yaml'}>
          <p className="upload-drag-icon">
            <InboxOutlined/>
          </p>
          <p className="upload-text">点击或拖拽文件到此区域上传</p>
          <p className="upload-hint">
            支持单个或批量上传。（目前仅支持csv、json、xml、yaml文件）
          </p>
        </Dragger>
      </StepsForm.StepForm>
    </StepsForm>
  );
};
export default UpdateModal;
